<template>
<view>
<view class="banner">
   <swiper :autoplay="autoplay" :interval="interval" :duration="duration">
      <!-- <block wx:for="{{imgUrls}}" wx:key=""> -->
      <swiper-item v-for="(item, index) in shopInfoList.pic" :key="index" @tap="banner" :data-index="index">
         <image :src="item.big" class="slide-image"></image>
      </swiper-item>
      <!-- </block> -->
   </swiper>
</view>
<!-- 倒计时 -->
<view class="countDown">
   <view class="countDowm-left">
      <view class="title1">
         <text>超值</text>
         <text style="color:#E51F54">秒杀</text>
      </view>
      <view class="title2">先抢先得</view>
   </view>
   <view v-if="isOver" class="countDowm-right">
      <view>距结束</view>
      <view class="endTime">
         <view>{{overTime[0]}}</view>:
         <view>{{overTime[1]}}</view>:
         <view>{{overTime[2]}}</view>
      </view>
   </view>
   <view v-if="!isOver" class="countDowm-right">
      <view>活动已结束</view>
   </view>
</view>
<!-- 倒计时End -->
<!-- 价格 -->
<view class="title-warp">
   <view class="current" v-if="ab == 0">
      <text>￥</text>
      <text>{{shopInfoList.price}}</text>
   </view>
   <view class="aa" v-if="ab != 0">
      <view class="l-b-l-top">
         <text style="font-size:30rpx">￥</text>
         <text>{{aa}}</text>
      </view>
      <view class="l-b-l-bottom">
         <text style="font-size:28rpx">￥</text>
         <text>{{ab}}</text>
      </view>
   </view>
   <view class="title">
      <text>{{shopInfoList.name}}</text>
   </view>

   <!-- <view class='del original'>
    <text>￥</text>
    <text>2990.00</text>
  </view> -->
   <view class="repertory fr">
      <!-- 库存
    <text>{{shopInfoList.goods_number}}</text> -->
   </view>
</view>
<!-- 详情&评价 -->
<view class="appraise-warp">
   <!-- tab选项卡 -->
   <view v-for="(item, index) in navList" :key="index" @tap="getStatus" :id="'NAV' + index" class="appraise-title" :data-index="index">
      <view @tap="EventHandle">
         <text :class="index === status ? 'active' : ''">{{item}}</text>
      </view>
   </view>
   <!-- 详情 -->
   <view :hidden="status!==0" class="particulars-warp">
      <view class="particulars">
         <rich-text :nodes="shopInfoList.intro"></rich-text>
      </view>
   </view>
   <!-- 评价 -->
   <!-- <view hidden="{{status!==1}}" class='particulars-warp'>
    <view class='appraise'>
      <view class='appraise-pic'>
        <image></image>
      </view>
      <view class='appraise-name'>
        <text>粉红小猪</text>
      </view>
      <view class='appraise-time fr'>
        <text>2018-05-12 15：36</text>
      </view>
      <view class='appraise-cont'>
        <text>宝贝不错，已经用了一段时间了，效果不错，味道很好闻用它洗完脸摸着自己的脸蛋软软的滑滑的好舒服，用完还要回购，是正品，想买的亲赶紧下手</text>
      </view>
      <view class='cont-pic list'>
        <image></image>
        <image></image>
        <image></image>
      </view>
    </view>
  </view>
</view> -->
   <view :hidden="status!==1" class="particulars-warp">
      <view v-for="(item, index) in shopInfoList.comments" :key="index" class="appraise">
         <view class="appraise-pic">
            <image :src="item.touxiang"></image>
         </view>
         <view class="appraise-name">
            <text>{{item.author_name}}</text>
         </view>
         <view class="appraise-time fr">
            <text>{{item.time}}</text>
         </view>
         <view class="appraise-cont">
            <text>{{item.comment}}</text>
         </view>
         <view class="cont-pic list">
            <image></image>
            <image></image>
            <image></image>
         </view>
      </view>
   </view>
</view>
<!-- 底部操作 -->
<view class="bottom-warp list">
   <view class="left">
      <!-- 跳转首页 -->
      <view class="left-head" @tap="toIndex">
         <image src="/static/remao_shop/img/shouye.png"></image>
         <view>首页</view>
      </view>
   </view>
   <view v-if="isOver" class="right" @tap="popupshow" data-car="2">
      <text>立即购买</text>
   </view>
   <view v-if="!isOver" class="noRight">
      <text>秒杀已结束</text>
   </view>
</view>
<!-- 加入购物车 -->
<view class="mask-box" :hidden="popup">
   <view @tap.stop="popuphidden" style="width:100%;height:650rpx;"></view>
   <view class="mask-bot">
      <view>
         <view class="popup-warp">
            <view class="popup-pic fl">
               <image :src="isShowImg" :data-img="isShowImg" @tap.stop="lookPic"></image>
            </view>
            <view class="pop-warp fr">
               <view class="pop-title">
                  <text>欧诗漫水活化妆品套装专柜女补水保湿乳液珍珠护肤品水乳官网正品</text>
               </view>
               <view class="pop-current" v-if="ab == 0">
                  ￥
                  <text>{{isShowMoney}}</text>
               </view>
               <view class="pop-current" v-if="ab != 0">
                  <text style="font-size:30rpx">￥</text>
                  <text>{{aa}}</text>
               </view>
               <view class="pop-repertory fr">
                  库存
                  <text>{{isShowNumber}}</text>
               </view>
            </view>
         </view>
      </view>
      <view v-for="(item, index) in specification" :key="index" class="spec-warp">
         <view class="spec">
            <text>{{item.spec_name}}</text>
         </view>
         <view class="option-warp">
            <view class="frame fl">
               <view>
                  <block v-for="(item, index2) in item.spec_values" :key="index2">
                     <text :class="item.isSelect?'op-active':'normal'" :data-select-index="id" :data-attr-index="index" :data-content="specification" @tap="clickMenu">{{item.spec_value}}</text>
                  </block>
               </view>
            </view>
         </view>
      </view>
      <view class="count-warp">
         <view class="spec">
            <text>数量</text>
         </view>
         <view class="but">
            <text @tap="deleteShopNum">-</text>
            <text class="but-count">{{shopNum}}</text>
            <text @tap="addShopNum">+</text>
         </view>
      </view>
      <view class="btn-sure">
         <view class="confirm" @tap="optionsure">
            <text>确定</text>
         </view>
      </view>
   </view>
</view>
</view>
</template>

<script>
import api from "../../../api";
var app = getApp(); // var text;
// var text;
var guige = [];
var myGuige = null;
var countTime;

export default {
  data() {
    return {
      userId: '',
      bannerList: [],
      shopId: '',
      shopInitPrice: '',
      // 请求参数
      requestShopId: '',
      // 选择规格判断默认图片&价格&库存--选择好规格后的价格和图片和库存
      isShowImg: '',
      isShowMoney: '',
      isShowNumber: '',
      // 商品详情列表
      shopInfoList: [],
      // 商品数量
      shopNum: 1,
      // 商品规格列表
      specification: [],
      // 选择好的规格
      changeSpecification: [],
      // tab切换
      navList: ["详情", "评价"],
      // 规格选择列表
      idd: [],
      // // 是否选择了规格 判断
      // ischangespecification: '',
      // 加入购物车&购买
      car: '',
      // 判断活动是否结束
      isOver: true,
      // 倒计时数组
      overTime: [],
      // 倒计时结束时间
      endOverTime: null,
      imgUrls: ["/static/remao_shop/img/details-banner.png", "/static/remao_shop/img/details-banner.png"],
      countDownList: [],
      actEndTimeList: [],
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 1000,
      status: 0,
      pop: 0,
      showView: true,
      popup: true,
      aa: '',
      ab: '',
      hidden: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //收藏初始
    console.log(options);
    this.setData({
      shopId: options.goods_id,
      isShowImg: options.img,
      endOverTime: options.endTime,
      aa: options.a,
      ab: options.b
    }); // 获取请求Unicodeid

    this.getUnicodeid();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    popupshow: function (e) {
      console.log(e);
      this.setData({
        car: e.currentTarget.dataset.car
      });
      this.setData({
        popup: false
      });
    },
    // 预览图片
    lookPic: function (e) {
      console.log(e.currentTarget.dataset.img);
      var picList = [];
      picList.push(e.currentTarget.dataset.img);
      wx.previewImage({
        current: picList[0],
        // 当前显示图片的http链接
        urls: picList // 需要预览的图片http链接列表

      });
    },
    //消失
    popuphidden: function () {
      this.setData({
        popup: true
      });
    },
    // 选择规格
    clickMenu: function (event) {
      let that = this; // console.log(event)

      let selectIndex = event.currentTarget.dataset.selectIndex;
      let attrIndex = event.currentTarget.dataset.attrIndex;
      let content = event.currentTarget.dataset.content;
      var count = content[selectIndex].spec_values.length;

      for (var i = 0; i < count; i++) {
        content[selectIndex].spec_values[i].isSelect = false;
      }

      content[selectIndex].spec_values[attrIndex].isSelect = true; // // 必须重新渲染数据----------为了添加isSelect属性

      that.setData({
        specification: content // indexOne: selectIndex,
        // indexTwo: attrIndex,
        // text:''

      }); // 选择规格

      if (selectIndex == 0) {
        guige[0] = this.specification[0].spec_values[attrIndex].spec_value_id;
      } else if (selectIndex == 1) {
        guige[1] = this.specification[1].spec_values[attrIndex].spec_value_id;
      } else if (selectIndex == 2) {
        guige[2] = this.specification[2].spec_values[attrIndex].spec_value_id;
      }

      console.log(guige);

      if (this.specification.length == 1) {
        myGuige = guige[0];
      } else if (this.specification.length == 2) {
        myGuige = guige[1] + '_' + guige[0];
      } else if (this.specification.length == 3) {
        myGuige = guige[2] + '_' + guige[1] + '_' + guige[0];
      }

      console.log();
      console.log(myGuige); // 遍历所有可用规格并进行匹配

      for (let item in this.shopInfoList.sys_attrprice) {
        if (myGuige == item) {
          // 显示对应的价格和图片
          let showguige1 = this.shopInfoList.sys_attrprice[myGuige].pic;
          let showguige2 = this.shopInfoList.promote_price;
          let showguige3 = this.shopInfoList.sys_attrprice[myGuige].number;
          this.setData({
            isShowMoney: showguige2,
            isShowNumber: showguige3
          });

          if (showguige1 != '') {
            this.setData({
              isShowImg: showguige1
            });
          }
        }
      }
    },

    // 增加商品数量
    addShopNum() {
      if (this.shopNum < this.isShowNumber) {
        this.setData({
          shopNum: this.shopNum + 1
        });
      } else {
        wx.showToast({
          title: '抱歉亲，库存不够了呢！',
          duration: 2000,
          icon: 'none'
        });
      }
    },

    // 减少商品数量
    deleteShopNum() {
      if (this.shopNum > 1) {
        this.setData({
          shopNum: this.shopNum - 1
        });
      } else {
        wx.showToast({
          title: '亲，购买数量不能再减了哦！',
          duration: 2000,
          icon: 'none'
        });
      }
    },

    //点击确定
    optionsure(e) {
      let that = this;
      let a = wx.getStorageSync("userId");
      console.log(a);

      if (a == '') {
        wx.switchTab({
          url: '../../pages/mine/mine'
        });
      } else {
        that.setData({
          userId: a
        });

        if (myGuige == null) {
          wx.showToast({
            title: '请选择规格',
            icon: 'none',
            duration: 1000
          });
        } else {
          if (myGuige.indexOf("undefined") != -1) {
            wx.showToast({
              title: '请选择规格',
              icon: 'none',
              duration: 1000
            });
          } else {
            // 判断库存够不够
            if (this.shopNum > this.isShowNumber) {
              wx.showToast({
                title: '亲，库存不够了呢',
                icon: 'none',
                duration: 1000
              });
            } else {
              // 购物车
              if (this.specification.length == 1) {
                var myGuigecart = guige[0];
              } else if (this.specification.length == 2) {
                var myGuigecart = guige[1] + ',' + guige[0];
              } else if (this.specification.length == 3) {
                var myGuigecart = guige[2] + ',' + guige[1] + ',' + guige[0];
              }

              console.log(myGuigecart);
              console.log(that.car);
              app.globalData.request({
                url: api.fyz.add_cart,
                data: {
                  goods_id: that.shopId,
                  uid: that.userId,
                  goods_number: that.shopNum,
                  spec_value_id: myGuigecart,
                  type: that.car,
                  // 询价
                  ask_price: that.shopInfoList.promote_price // uniacid: that.data.requestShopId.uniacid,
                  // acid: that.data.requestShopId.acid,
                  // version: that.data.requestShopId.version,
                  // platform: 'wx'

                },
                header: {
                  'content-type': 'application/x-www-form-urlencoded' // 默认值

                },
                method: 'POST',
                dataType: 'json',
                responseType: 'text',
                success: res => {
                  console.log(res);

                  if (res.data.status == 1) {
                    if (that.car == 1) {
                      wx.showToast({
                        title: res.data.msg,
                        duration: 2000
                      });
                      setTimeout(function () {
                        that.setData({
                          popup: true
                        });
                      }, 2000);
                    } else if (that.car == 2) {
                      // wx.showToast({
                      //   title: res.data.msg,
                      //   duration: 1000
                      // });
                      // setTimeout(function () {
                      console.log(res.data.cart_id);
                      wx.navigateTo({
                        url: '../affirm/affirm?userId=' + that.userId + '&cart_id=' + res.data.cart_id + '&type=' + that.car + '&ismiaosha=' + 1
                      });
                      that.setData({
                        popup: true
                      }); // }, 1000)
                    }
                  } else {
                    wx.showToast({
                      title: res.data.msg,
                      duration: 2000
                    });
                  }
                },
                fail: function (res) {},
                complete: function (res) {}
              });
            }
          }
        }
      } // this.setData({ popup: true })

    },

    getUnicodeid() {
      var that = this;
      wx.getStorage({
        key: 'requestShopId',
        success: function (res) {
          console.log(res);
          that.setData({
            requestShopId: res.data
          });
          that.getlist();
        }
      });
    },

    getlist: function () {
      var that = this;
      var uid = wx.getStorageSync("userId");
      that.setData({
        userId: uid
      });
      console.log(this.requestShopId);
      app.globalData.request({
        url: api.fyz.spikeShopInfo,
        data: {
          goods_id: that.shopId,
          user_id: that.userId // uniacid: that.data.requestShopId.uniacid,
          // acid: that.data.requestShopId.acid,
          // version: that.data.requestShopId.version,
          // platform: 'wx'

        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            bannerList: res.pic,
            shopInfoList: res,
            specification: res.specification,
            isShowMoney: res.price
          }); // 计时器

          countTime = setInterval(that.countDown, 1000); // 判断该商品是否收藏

          if (res.is_collect == 0) {
            this.setData({
              showView: true
            });
          } else if (res.is_collect == 1) {
            this.setData({
              showView: false
            });
          }

          console.log(that.showView);
        },
        fail: function (res) {},
        complete: function (res) {}
      });
    },

    // 倒计时
    countDown() {
      let endTime = parseInt(this.endOverTime);
      console.log(endTime);
      let nowTime = parseInt(new Date().getTime() / 1000); // console.log(nowTime, endTime)

      let time = endTime - nowTime;
      var hour = parseInt(time / 60 / 60);

      if (String(hour).length == 1) {
        hour = '0' + hour;
      }

      var minute = parseInt(time / 60 % 60);

      if (String(minute).length == 1) {
        minute = '0' + minute;
      }

      var seconds = parseInt(time % 60);

      if (String(seconds).length == 1) {
        seconds = '0' + seconds;
      } // console.log(hour, minute, seconds)


      let timer = [];
      timer[0] = hour;
      timer[1] = minute;
      timer[2] = seconds; // console.log(timer)

      if (time > 0) {
        this.setData({
          overTime: timer,
          isOver: true
        });
      } else {
        clearInterval(countTime);
        this.setData({
          isOver: false
        });
      }
    },

    //详情评价点击事件
    getStatus(e) {
      this.setData({
        status: e.currentTarget.dataset.index,
        hidden: false
      });
    },

    // 收藏商品
    changepic: function () {
      var that = this;

      if (that.isLogin() == 0) {
        wx.switchTab({
          url: '../../pages/mine/mine'
        });
      } else {
        that.setData({
          userId: wx.getStorageSync("userId")
        });
        wx.request({
          url: api.fyz.shopCollection,
          data: {
            goods_id: this.shopId,
            user_id: that.userId
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值

          },
          method: 'POST',
          success: res => {
            console.log(res.data);
            wx.showToast({
              title: res.data.msg,
              duration: 1000
            });
            that.setData({
              showView: !that.showView
            });
          },
          fail: function (res) {},
          complete: function (res) {}
        });
      }
    },

    // 跳转购物车
    toShopCar() {
      wx.switchTab({
        url: '../../pages/trolley/trolley'
      });
    },

    // 跳转首页
    toIndex() {
      wx.switchTab({
        url: '../../pages/index/index'
      });
    },

    // 判断是否登录
    isLogin() {
      if (wx.getStorageSync("userId") == '') {
        return 0;
      } else {
        return 1;
      }
    },

    // 轮播图跳转
    banner(e) {
      console.log(this.bannerList);
      var list = [],
          index = e.currentTarget.dataset.index;
      console.log(e);

      for (var i = 0; i < this.bannerList.length; i++) {
        list[i] = this.bannerList[i].big;
      }

      wx.previewImage({
        current: list[index],
        urls: list // 需要预览的图片http链接列表

      });
    }

  }
};
</script>
<style>
@import "./spikeShop.css";
</style>